<template>
  <div class="card">
    <div class="title">
      <el-page-header
        content="修改轮播图"
        @back="goBack"
      />
    </div>
    <div class="body">
      <div class="base-message">
        <el-form
          label-width="150px"
          :model="formData"
        >
          <el-form-item label="点击轮播图跳转地址">
            <el-input
              v-model="formData.link"
              placeholder="请输入轮播图跳转地址"
              style="width: 400px"
            />
          </el-form-item>
          <el-form-item label="轮播图排序">
            <el-input-number
              v-model="formData.orders"
              placeholder="请输入轮播图排序"
              style="width: 400px"
            />
          </el-form-item>
          <el-form-item label="轮播图">
            <cover-upload :img-url.sync="formData.path" />
          </el-form-item>
        </el-form>
      </div>

      <el-button
        class="add-message"
        type="danger"
        @click="addCarousel"
      >点击修改轮播图</el-button>
    </div>
  </div>
</template>

<script>
import { updateCarousel, getCarouselDetail } from '../../../api/carousel';
import CoverUpload from '@components/common/upload';

export default {
  components: {
    CoverUpload
  },
  props: {
    id: {
      type: Number,
      default: 0
    },
    showIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      varietyList: [],
      formData: {
        'path': '',
        'link': '',
        'orders': 0 // 排序
      }
    };
  },
  created() {
    getCarouselDetail(this.id).then(res => {
      if (res.data.code !== 200) {
        this.$message.error(res.data.message);
        return;
      }
      this.formData = res.data.data;
    }).catch(err => {
      console.log(err);
      this.$message.error('查询轮播图详情出错');
    });
  },
  methods: {
    goBack() {
      this.$emit('update:showIndex', 0);
      this.$emit('goBack');
    },
    addCarousel() {
      console.log(this.formData);
      updateCarousel(this.formData)
        .then((res) => {
          if (res.data.code !== 200) {
            this.$message.error(res.data.code.message);
            return;
          }
          this.goBack();
          this.$message.success('修改成功');
        })
        .catch((err) => {
          console.log(err);
          this.$message.error('修改失败');
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.card {
  /*background:rgba(255,255,255,1);*/
  // border: 1px solid rgba(211, 211, 211, 1);
  .title {
    width: 100%;
    height: 48px;
    background: rgba(241, 245, 249, 1);
    border: 1px solid rgba(211, 211, 211, 1);
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: bold;
    color: rgba(27, 33, 63, 1);
    display: flex;
    align-items: center;
    padding-left: 32px;
    position: fixed;
    z-index: 999;
  }
  .body {
    width: 100%;
    padding: 60px;
    .variety-item {
      display: flex;
      .variety-item-title {
        // display: flex;
        // align-items: center;
        // margin-right: 30px;
      }
    }
    .base-message {
    }
    .introduce {
      width: 70%;
    }
  }
}
.add-message {
    margin-top: 50px;
    margin-left: 35px;
}
::v-deep .abstract textarea {
  height: 150px !important;
}
</style>
